<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

<input type="file" onchange="loadImg(this)">
<hr>
<div>800×449，544KB</div>
<img src="" alt="">
<hr>
<div>400×224，157KB</div>
<canvas></canvas>
<img id="img2" src="" alt="">
<script>
    //  上传图片
    function loadImg(me) {
        let img = document.querySelector('img');
        let cvs = document.querySelector('canvas');
        let file = me.files[0];    //  获取到文件对象
        //  上传的图片大于 500KB 时才压缩
        alert(file.size / 1024);
        let reader = new FileReader();
        reader.readAsDataURL(file);     //  转成 base64 编码

            reader.onload = function (e) {
                let naturalBase64 = e.target.result;    //  获取 base64 编码，这是原图的
                img.src = naturalBase64;
                img.onload = function () {
                    let ratio = img.naturalWidth / img.naturalHeight; //  获取原图比例,为了等比压缩
                    cvs.width = 800;
                    cvs.height = cvs.width / ratio;
                    let ctx = cvs.getContext('2d');
                    ctx.drawImage(img, 0, 0, cvs.width, cvs.height);    //  画在 canvas 上
                    // 压缩后新图的 base64
                    let zipBase64 = cvs.toDataURL();
                    console.log(zipBase64);
                   /* let img2 = document.getElementById("img2");
                    img2.src=zipBase64;*/
                }
            }

    }
</script>
</body>

</html>